前言

其實我想了很久，要從哪邊繼續學習這門語言才不會讓人難以理解，

就像是建築一定要打好基底才蓋出雄偉的大樓一樣，

那麼這門語言的基底是什麼呢？

目前我對這門語言的理解如下圖：

ECMAScript所規範的語法跟文件物件模型（DOM）

就像是現代戰爭所用的高科技兵器，

ECMAScript所規範的語法就如同強大的火力，

而DOM(文件物件模型)就像是精確的導引系統，

就如通狙擊槍的槍身跟瞄準鏡一般(如下圖)：

擁有強大的火力，可以解決眾多問題，

但是唯有配合精確的導引系統，才能精確殲滅敵人及誤傷友軍，

雖然過去的戰爭中，有過依賴強大的火力還彌補命中率不足的問題，

但是經歷了兩次世界大戰慘痛的教訓之後，戰爭越來越重視人道，

使得現代戰爭均受到依戰爭法(武裝衝突法)的制約，以減少不必要傷亡。

那JavaScript我們應該要先學ECMAScript語法(火力)還是先學DOM(瞄準)呢？

當然是ECMAScript語法，這點是毫無懸念的，

但是也不是一次到底，先讓你有基礎概念(火力)之後，

才會要開始理解DOM(瞄準)了，就像培養一個士兵，

要先教會他射擊(扣板機)之後，才能讓他去靶場學習瞄準。

一切基礎之前 先用擁有一個可以實作的平台 console

一步實際運動比一打綱領更重要 --卡爾·馬克思--維基語錄

如同馬克思先生說的，將所學的一切實踐吧!

實踐過後可以更加深所學的記憶，而所學到JavaScript可以去哪邊實做呢？

身為初學者的我們最常實作的地方有兩個

那就是瀏覽器的console跟終端機上的Node.js兩個，

鯊魚依現階段的建議，操作基礎的演示(或是一些特殊需求)

比較推薦使用瀏覽器的console，

如果想使用Node.js的話，就必須先去Node.js官網下載檔案來安裝，

才能在終端機執行寫好的js文檔。

• 瀏覽器的console

首先先開起一個空白頁，叫出開發者工具，

切換到console的頁面，你就可以在上面嘗試JavaScript語法了

試試輸入

console.log("Hi")

你就能看到瀏覽器回傳一個Hi給你(如圖)，

成功之後，有沒有覺得很簡單呢？接下來就是嘗試下面要學的東西了。

變數（Variables） 乘載萬物的橋樑

變數是什麼，依據MDN對變數的解釋是這樣的說，

變數（variable）是對值（value）的引用。

一個變數可以代表一個值，我們拿台積電2021每個月的營收數據來實作

可以用一個變數是代表每個月的營收金額，就像這樣：

JAN = 126,749; //1月份營收126,749(百萬)
FEB = 106,534; //2月份營收106,534(百萬)
MAR = 129,127; //3月份營收129,127(百萬)
//以下省略，有興趣可以自己去看台積電的收據

當需要這些數字的時候，可以直接使用 JAN、FEB、MAR等來調用這些值。

console.log(JAN,FEB,MAR)

這樣一來可以省下記憶這些數字的麻煩，還也可以簡化程式碼

但是請切記，大小寫是代表不同東西，也就是說 JAN ≠ jan

此外方便的變數當然也存在一些限制，

• 變數的第一個字只能是英文字母、_(下底線)或是$(錢字號)
• 不能使用保留字元或是關鍵字-參見MDN-Lexical grammar
• 礙於編碼問題盡量少用中文來當變數名稱

//註解 /* 不會被執行內容 */

當你寫完一段程式碼，突然想在上面加上一些額外的內容去解釋的時候

就需要用到註解功能了，如下面演示一樣

a = 20;
console.log(a);
// b = 30;
console.log(b);

第三行//開頭的內容就不會被執行了

同樣道理 /* (要註解的內容) */ 也是一樣

宣告(declared)

宣告，便是向全世界訴說這東西存在

而宣告的方式有三種

• 最不嚴謹的可以被重複宣告且值可以一直被改變的var
  同時也是現在對最不建議使用的宣告方式
• 只能被宣告一次的，但是值可以一直改變的let
• 只能被宣告一次的且同時必須賦予一個值，之後就不能改變的const

就像下面

var a  ;
let b  ;
const c  ; // 因為沒有值，所以直接報錯無法執行
// 外加一個不用宣告直接使用
d  ;  // 因為d沒有被定義
之後去輸入a b c d 
a // 有東西但是未被定義
b // 有東西但是未被定義
c // 沒有被定義
d // 沒有被定義

只有 a b 是可以被執行的，因為它們被成功地宣告了

那var let是有什麼差別呢？

最淺顯易懂的部分就是能不能重複宣告的部分，

將下面的程式碼拿去執行一次

var a  ;
var a  ;
let b  ;
let b  ; 

此時就會報錯了，因為被let宣告過的變數，不能再做一次宣告

再來就是宣告的位置不同，var宣告的變數是全域變數

也就是不管是哪裡都能夠使用的東西，很容易很其他人寫的程式碼互相衝突

而let宣告的變數是一個區域變數，只能在特定範圍以內可以找到

就像是for迴圈常使用的i

for(let i = 0; i < 20 ; i++){
    console.log(i)
}
console.log(i)
//因為i這個值沒有被宣告而被報錯

for 迴圈外面使用i會找不到值，這樣可以減少全域環境下的汙染

如果改用var的話

for(var i = 0; i < 20 ; i++){
    console.log(i)
}
console.log(i)

因為i被宣告在全域，所以其他地方都可以調用i的值

這是一個很危險的事情，很容易很別人的參數混在一起

導致很多很可怕的錯誤，這也是為什麼，現在不建議使用var的原因。

賦值(assignment)

一般來說，宣告跟賦值可以分開進行，也能同時進行

let b  ;
    b = 20;
//上面跟下面是一樣的
let b = 20 ; 

但是有一個例外，那就是const

const代表的是一個Constants(常數)，也就是不會再改變的東西

所以當他宣告的時候就必須擁有值了，通常用在不會改變的東西上面

如果試圖去改變他的值就會出現錯誤

const c = 20 ;
//不能再去改變他的值了
    c = 30;

結語

相似的東西最容易搞混，如果還對var let 跟 const三種宣告感到困惑，

不妨試著做一個表格來比較他們吧！這樣就可以更清楚三種宣告的不同之處了。

這些都是語法的基礎，試著去理解他們，使自己變更強大，

當你擁有基礎的認知(火力)之後，就可以開始四處探險了。

參考資料

維基語錄--卡爾·馬克思
台積電2021每個月的營收數據
MDN-變數
MDN-Lexical grammar